<template>
  <view class="club-list-container">
    <view class="header">
      <text class="title">俱乐部名称</text>
      <view class="create-club">
        <button class="create-club-btn" @click="createClub">
          创建俱乐部

        </button>
        <image class="question-icon" :src="imgUrl + 'question@2x.png'" />
      </view>
    </view>
    <view class="list">
      <view v-for="(club, index) in clubs" :key="index" class="club-item">
        <view class="rank-info">
          <image v-if="club.rank <= 3" class="medal-icon" :src="getMedalIcon(club.rank)" />
          <text v-else class="rank-number">{{ club.rank }}</text>
          <!-- <image v-if="index <= 3" :src="getMedalIcon(index)" class="medal-icon" />
          <text v-else class="rank-number">{{ index + 1 }}</text> -->
          <image :src="club.logo" class="club-logo" />
          <text class="club-name">{{ club.name }}</text>
        </view>
        <text class="club-score">{{ club.points }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, watch, nextTick } from 'vue';
  import { imgUrl } from '@/utils/config'
  import { onShow } from '@dcloudio/uni-app';
  const props = defineProps({
    clubs: {
      type: Array,
      required: true,
    },
  });

  const getMedalIcon = (index) => {
    const medals = [
      imgUrl + 'firstPlace@2x.png',
      imgUrl + 'runner-up@2x.png',
      imgUrl + 'thirdPlace@2x.png',
    ];
    return medals[index];
  };

  const createClub = () => {
    uni.showToast({
      title: '创建俱乐部功能待实现',
      icon: 'none'
    });
  };
  // 监听 clubs 数据变化
  watch(() => props.clubs, async (newClubs) => {
    if (newClubs && newClubs.length > 0) {
      console.log('clubs data updated:', newClubs);
      // 在这里处理数据更新后的逻辑
      // 等待 DOM 更新完成
      await nextTick();
    }
  }, { immediate: true, deep: true });

</script>

<style lang="scss" scoped>
  .club-list-container {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #1D2129;
    }

    .create-club {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .create-club-btn {
      display: flex;
      align-items: center;
      background-color: #2c3e50;
      color: white;
      font-size: 26rpx;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
      line-height: 1;
      margin: 0;

      &::after {
        border: none;
      }
    }

    .question-icon {
      width: 36rpx;
      height: 36rpx;
      margin-left: 10rpx;
    }
  }

  .list {
    .club-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .rank-info {
        display: flex;
        align-items: center;
      }

      .rank-number {
        width: 48rpx;
        text-align: center;
        font-size: 30rpx;
        color: #666;
        margin-right: 16rpx;
      }

      .medal-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 16rpx;
      }

      .club-logo {
        width: 48rpx;
        height: 48rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;
      }

      .club-name {
        font-size: 28rpx;
        color: #333;
      }

      .club-score {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
    }
  }
</style>